<template>
    <div >
      <m-header v-scroll-header="[0, 50, 100]"></m-header>
      <div class="banner" >
        <div class="background" :style="background.banner"  ></div>
        <div class="banner-panel">
          <div class="banner-left">
            <div class="banner-left-info">
              <h3>姓名</h3>
              <p>杨念</p>
            </div>
            <div class="banner-left-info">
              <h3>实验室学习方向</h3>
              <p>web前端</p>
            </div> <div class="banner-left-info">
              <h3>届数</h3>
              <p>5</p>
            </div>
            <div class="banner-left-info">
              <h3>性别</h3>
              <p>男</p>
            </div> <div class="banner-left-info">
              <h3>年龄</h3>
              <p>95.12</p>
            </div>

            <div class="banner-left-info">
              <h3>年級</h3>
              <p>2015级</p>
            </div><div class="banner-left-info">
              <h3>专业</h3>
              <p>计算机科学与技术</p>
            </div>
            <div class="banner-left-info">
              <h3>邮箱</h3>
              <p>yang.nian@foxmail.com</p>
            </div>
            <div class="banner-left-info">
              <h3>电话</h3>
              <p>15520446752</p>
            </div>
            <div class="banner-left-info">
              <h3>博客地址</h3>
              <p>http://mutour.vip</p>
            </div>
            <div class="banner-left-info">
              <h3>github地址</h3>
              <p>https://github.com/mutour123</p>
            </div>
            <div class="banner-left-info">
              <h3>微博</h3>
              <p>木几面</p>
            </div>
            <div class="banner-left-info">
              <h3>知乎</h3>
              <p>小木</p>
            </div>
            <div class="banner-left-info">
              <h3>掘金</h3>
              <p>小木</p>
            </div>
            <div class="banner-left-info">
              <h3>所在组织单位/公司</h3>
              <p>木头人集团有限公司</p>
            </div>

          </div>
          <div class="banner-right">
            <img class="head-image" src="../assets/me.jpg" alt="">
            <div class="banner-right-info">
              <div class="base-info">
                <div class="introduction">
                  <h3>个人简介</h3>
                  <p>大家好，我叫杨念。95年出生，在实验室学习的是web前端， 学得比较渣，还请
                  各位见谅。当然如果你们不嫌弃的话， 也可以找我交流交流。在我范围内的
                  东西我还是很愿意给大家分享一下的。</p>
                  <span class="time">2018年5月15日更新</span>
                </div>
                <div class="introduction">
                  <h3>座右铭</h3>
                  <p>这个人很懒， 什么都没有留下这个人很懒</p>
                  <span class="time">2018年5月15日更新</span>
                </div>
              </div>
              <div class="introduction myhonor">
                <h3>成绩</h3>
                <ul>
                  <li>
                    <p>项目：西华杯</p>
                    <p>参数项目： 木头人网络</p>
                    <p>团队： 小木团队</p>
                    <p>负责人： 杨念</p>
                    <p>队员： 周鹏、胡清清、李奎</p>
                    <p>成果： 圆满结题</p>
                    <p>简介： 该项目是让学校里闲置书籍流动起来的项目， 在我们做的网站上用户可以发布自己看过闲置的书籍， 其他用户可以在该网站上查看自己想看的书籍</p>
                    <p>链接： http://www.mutour.vip</p>
                  </li>
                  <li>
                    <p>比赛项目： 蓝桥杯算法比赛b组</p>
                    <p>参赛项目： 算法javab组</p>
                    <p>团队： 个人</p>
                    <p>成果： 省二等奖</p>
                  </li>
                  <li>
                    <p>项目： 西瓜课表</p>
                    <p>项目： 西瓜课表</p>
                  </li>

                </ul>

              </div>
              <div class="introduction">
                <h3>对后届的话</h3>
                <p>这里是我的学习历程，
                  这里是对你们劝诫这里是我的学习历程，
                  这里是对你们劝诫这里是我的学习历程，
                  这里是对你们劝诫这里是我的学习历程，
                  这里是对你们劝诫这里是我的学习历程，
                  这里是对你们劝诫这里是我的学习历程，
                  这里是对你们劝诫这里是我的学习历程，
                  这里是对你们劝诫这里是我的学习历程，
                  这里是对你们劝诫这里是我的学习历程，
                  这里是对你们劝诫这里是我的学习历程，
                  这里是对你们劝诫这里是我的学习历程，
                  这里是对你们劝诫这里是我的学习历程，
                  这里是对你们劝诫这里是我的学习历程，
                  这里是对你们劝诫</p>
                <span class="time">2018年5月15日更新</span>
              </div>
            </div>
          </div>

          </div>
        </div>
      <!--  <div class="project">
          <main>
            <h1>那些光辉岁月</h1>
            <ul>
              <li>西华杯</li>
              <li>蓝桥杯二等奖</li>
              <li>承接项目-《西华bus》</li>
              <li>实验室网站</li>
            </ul>
          </main>
        </div>-->

      </div>

    </div>
</template>

<script>
  import MHeader from './MHeader'
  import {Bgimg} from "../Bgimg";

  export default {
    name: "people",
    data(){
      return {
        background: {
          banner: {
            backgroundImage: `url(${Bgimg.people.banner})`
          }
        }
      }
    },
    components: {
      MHeader
    },
    mounted(){
      console.log(this.$route)
    }
  }
</script>

<style scoped lang="stylus">
  @import "../stylus/variable.styl"
  .banner
    overflow hidden
    box-sizing border-box
    .background
      position fixed
      z-index 1
      height 100vh
      width 100vw
  .banner-panel
    position relative
    z-index 10
    margin auto
    margin-top $header-light+100px
    margin-bottom 100px
    display flex
    padding 32px 16px
    width 80%
    box-sizing border-box
    background-color rgba(255, 255, 255, .18)
    color #fff
  .banner-left
    border-right 1px solid silver
    flex-basis 360px
    padding 0 15px
  .banner-left-info
    border-bottom 1px darkgray dashed
    h3
      font-family '仿宋'
      font-size 20px
      font-weight bolder
      margin 10px 0
    p
      font-size 18px
      font-family '仿宋'
  .banner-right
    flex-basis 740px
    flex-grow 1
    padding 0 15px
  .head-image
    border 8px solid #fff
    position relative
    z-index 20
    float right
    margin 20px 0 20px 20px
    margin-left 20px
    height 250px
    box-sizing border-box
    width 200px
  .introduction
    overflow hidden
    position relative
    padding-top 20px
    border-bottom 1px silver dashed
    margin-bottom 10px
    p
      padding 10px
      text-indent 2em
      line-height 24px
    .time
      float right
  .myhonor
    border-bottom  1px silver dashed
    h3
      margin-bottom 10px
    li
      padding-left 2em
      border 1px silver solid
      min-height 120px
  .base-info
    min-height 290px


</style>
